<template>
  <div class="main_app">
    <div class="main_wait" v-if="$store.state.waiting">
      <img src="@/common/assets/loading.gif" alt="等待中..." />
      <!-- <atom-spinner :animation-duration="1000" :size="120" color="#3986fe" /> -->
    </div>
    <div class="main_ctx" v-else>
      <router-view />
    </div>
  </div>
</template>
<script>
  // import { AtomSpinner } from 'epic-spinners'
  import { initGlobalFunc } from '@/common/utils/api.js'
  export default {
    // components: { AtomSpinner },
    created() {
      initGlobalFunc(this)
    },
  }
</script>
<style lang="less" scoped>
  .main_app {
    display: flex;
    justify-content: center;
    width: 100%;
    min-width: 1250px;
    min-height: 100%;
    margin: 0 auto;
    background-color: @cpt_grey_light;

    .main_ctx {
      // width: 1250px; //中间固定宽度显示，两边缩放
      width: 100%; //宽度填充，按照大小缩放
    }

    .main_wait {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100vh;
      background-color: @cpt_grey_light;

      img {
        width: 200px;
      }
    }
  }
</style>
